/* eslint-disable no-unused-vars */
/* eslint-disable react/jsx-indent */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-unneeded-ternary */
/* eslint-disable react/jsx-closing-tag-location */
/* eslint-disable no-else-return */
/* eslint-disable no-param-reassign */
/* eslint-disable eqeqeq */
import React, { PureComponent } from 'react';
import { Modal, Table, Button, Row } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import TextOverFlow from './TextOverFlow';
import '@ant-design/compatible/assets/index.css';

@Form.create()
class DeclareModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      nowPage: 1,
      pageSizes: 5,
    };
  }

  componentDidMount() {}

  handleCancle = () => {
    this.props.onCancel();
  };

  handleOk = () => {
    const { onOk } = this.props;
    onOk();
  };

  downSingleTmp = record => {
    this.props.downSingleClick(record);
  };

  render() {
    const { nowPage, pageSizes } = this.state;
    const {
      visible,
      tableLoading,
      dataSource,
      declExportId,
      accoName,
      downLoadDeclErr,
    } = this.props;
    const columnsDeal = [
      {
        title: '账户名称',
        dataIndex: accoName,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        // render: text => text || '--',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '申报模版',
        dataIndex: 'declDetailName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: text => text || '--',
      },
      {
        title: '参保类型',
        dataIndex: 'addJoinTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: text => text || '--',
      },
      {
        title: '数量',
        dataIndex: 'num',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '操作',
        dataIndex: 'oper',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: (_, record) => <a onClick={() => this.downSingleTmp(record)}>下载</a>,
      },
    ];
    const tablePage = {
      defaultCurrent: 1, // 默认当前页
      defaultPageSize: 5, // 默认单页条数
      current: nowPage, // 当前页
      pageSize: pageSizes, // 单页条数
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      total: dataSource.data && dataSource.data.totalCount, // 数据总数
      showQuickJumper: true, // 跳转到某一页
      onChange: (page, pageSize) => {
        this.setState({ nowPage: page, pageSizes: pageSize });
        this.props.pageChange(page, pageSize);
      },
      showSizeChanger: true,
      onShowSizeChange: (current, size) => {
        // 单页条数变化的回调
        this.setState({ nowPage: current, pageSizes: size });
        this.props.pageSizeChange(current, size);
      },
      showTotal: total => {
        const totalPage =
          // eslint-disable-next-line no-use-before-define
          total < DeclareTable.pagination.pageSize
            ? 1
            : // eslint-disable-next-line no-use-before-define
              Math.ceil(total / DeclareTable.pagination.pageSize);
        return `共 ${total} 条记录 第 ${1} / ${totalPage}页`;
      },
    };
    const DeclareTable = {
      columns: columnsDeal,
      scroll: { y: 300 },
      dataSource: dataSource.data ? dataSource.data : [],
      bordered: false,
      loading: tableLoading,
      // pagination: tablePage,
      pagination: false,
      rowKey: record => record[declExportId], // 这里防止行重复
    };
    return (
      <Modal
        title="申报明细表导出"
        visible={visible}
        destroyOnClose
        onCancel={this.handleCancle}
        width={dataSource.success ? '700px' : '620px'}
        footer={
          dataSource.success
            ? [
                <Button key="back" onClick={this.handleCancle}>
                  关闭
                </Button>,
                <Button
                  key="submit"
                  type="primary"
                  onClick={this.handleOk}
                  disabled={dataSource.data && dataSource.data.length === 0}
                >
                  打包下载
                </Button>,
              ]
            : [
                <Button key="back" onClick={this.handleCancle}>
                  关闭
                </Button>,
              ]
        }
      >
        {dataSource.success ? (
          <div>
            <p>
              选择明细数量：<span>{dataSource.data && dataSource.data.length}</span>条
            </p>
            <Table {...DeclareTable} />
          </div>
        ) : (
          <div style={{ display: 'flex' }}>
            <InfoCircleOutlined style={{ color: '#F7CD6D', marginRight: 10, fontSize: 16 }} />
            {dataSource.data && dataSource.data.declErrMessage ? (
              <Row>
                <Row>
                  当前存在
                  <span className="emphasize-text">
                    {dataSource.data.declErrMessage.declErrCount}条
                  </span>
                  数据不可申报，请下载查看。
                </Row>
                <a
                  onClick={() =>
                    downLoadDeclErr(
                      '/osApi/insAddDet/declErrDataTemplate',
                      dataSource.data.declErrMessage.insDeclErrList
                    )
                  }
                >
                  下载
                </a>
              </Row>
            ) : (
              <div>
                <p style={{ color: '#262626', fontSize: 14, marginTop: -3 }}>
                  以下账户找不到相应的申报明细表模版，请联系系统管理员配置。
                </p>
                <p>{dataSource.message}</p>
              </div>
            )}
          </div>
        )}
      </Modal>
    );
  }
}
// }

export default DeclareModal;